<template>
  <!-- flex 容器，默认水平排列 -->
<el-container class="my-layout">
    <!-- 侧边栏 -->
  <el-aside width="200px">
    <img src="@/assets/images/logo.png" width="100%" alt="">

    <!-- el-menu 导航菜单，默认垂直排列 -->
    <el-menu
    :default-active="$route.path"
    background-color="#023"
    text-color="#fff"
    active-text-color="#409EFF"
    style="border-right: none;"
    router
    >

      <!-- el-menu-item 菜单项 -->
        <el-menu-item index="/">
            <!-- el-icon-xx   element-ui 内置图标 -->
          <i class="el-icon-s-home"></i>
          数据概览
        </el-menu-item>

        <el-menu-item index="/article">
          <i class="el-icon-document"></i>
          内容管理
        </el-menu-item>

        <el-menu-item index="/publish">
          <i class="el-icon-s-promotion"></i>
          发布文章
        </el-menu-item>

    </el-menu>

  </el-aside>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <span>{{ user.name || user.mobile }}</span>
      <el-link :underline="false" icon="el-icon-unlock" @click="onLogout()">退出</el-link>
    </el-header>
    <!-- 主体区 -->
    <el-main>
          <!-- 路由出口，路由插槽 -->
      <router-view />
    </el-main>
  </el-container>
</el-container>

</template>

<script>
import auth from '@/utils/token'
// 组件的注册使用步骤：
// 1. 创建组件 (创建vue文件)
//   2. 导入组件 (script -> import导入)
//   3. 注册组件 (script -> components注册)
//   4. 使用组件 (template -> 使用)
export default {
// 行为
  name: 'LayoutView',
  // 注意 data 是一个函数
  data () {
    return {
      user: {}
    }
  },
  async created () {
    // 获取用户信息// 在拦截器中自动拼接 token
    const res = await this.$http.get('/v1_0/user/profile')
    console.log(res)
    // 保存用户信息
    this.user = res.data.data
  },
  methods: {
    onLogout () {
      this.$confirm('是否推出登录', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 1.清空token
        auth.deleteToken()
        // 2. 跳转登录页
        this.$router.push('/login')
        // 3. 消息提示
        this.$message.success('退出成功')
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.my-layout {
  /* 1vw 视口宽度的 1% */
  /* 1vh 视口高度的 1% */
  height: 100vh;
}
.el-aside {
  background-color: #023;
}
.el-header {
  border-bottom: 1px solid #ddd;
   /* flex 模式 */
   display: flex;
  /* 主轴对齐方式 */
  justify-content: end;
  /* 交叉轴对齐方式 */
  align-items: center;
  /* 子元素的间距，类似鸿蒙的 space */
  gap: 10px;
}

</style>
